---
title: Caja de selección
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

Usado cuando un usuario necesita seleccionar múltiples valores entre varias opciones.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkbox } from "twenty-ui/display";

export const MyComponent = () => {
  return (
    <Checkbox
      checked={true}
      indeterminate={false}
      onChange={() => console.log("onChange function fired")}
      onCheckedChange={() => console.log("onCheckedChange function fired")}
      variant="primary"
      size="small"
      shape="squared"
    />
  );
};
```

</Tab>
<Tab title="Props">

| "Props"         | Tipo      | Descripción                                                                                                                            |
| --------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| marcado         | booleano  | Indica si la caja de selección está marcada                                                                                            |
| indeterminado   | booleano  | Indica si la caja de selección está en un estado indeterminado (ni marcada ni desmarcada)                           |
| "onChange"      | función   | La función de devolución de llamada que desea activar cuando cambia el estado de la caja de selección                                  |
| onCheckedChange | "función" | La función de devolución de llamada que desea activar cuando cambia el estado `marcado`                                                |
| variante        | "cadena"  | La variante de estilo visual de la caja. Las opciones incluyen: `primario`, `secundario` y `terciario` |
| tamaño          | "cadena"  | El tamaño de la caja de selección. Tiene dos opciones: `pequeño` y `grande`                            |
| forma           | cadena    | La forma de la caja de selección. Tiene dos opciones: `cuadrado` y `redondeado`                        |

</Tab>
</Tabs>
